<template>
	<div style="height:100%;">
		<quill-editor v-model="msgBody" style="height:70%;width:100%;"
      ref="myQuillEditor" :options="quillEditorOption"
      @change="onEditorChange($event)"></quill-editor>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	 
	import { quillEditor } from 'vue-quill-editor';
	export default {
		name: 'dialogFooter',
		data() {
			return {
				quillEditorOption:{
					placeholder: "请输入文字内容",
          modules:{
            toolbar: null,
          },
				},
				msgBody:``,
			}
		},
		components: {
			quillEditor
		},
		created() {
			// console.log(1)
		},
		methods: {
      initMsgBody(){
        
        this.msgBody = '';
      },
			addEmoji(objEmoji){
				console.log(objEmoji)
			  // 1.获取到富文本装着数据的对象
        let quill = this.$refs.myQuillEditor.quill
			  // 2.获取光标所在的位置quill.selection.savedRange.index
        quill.insertEmbed(quill.selection.savedRange.index,'image', objEmoji.src)
			  // 3.把图片插到光标的地方(第三个参数是图片的url)quill.insertEmbed(length, 'image', v.imgurl)
        quill.formatText(quill.selection.savedRange.index,1,{"alt": objEmoji.alt});
			  // 4.把光标移到图片的后面
        quill.setSelection(quill.selection.savedRange.index + 1)
			},
			onEditorChange({quill,html,text}){
        console.log({quill,html,text})
			  // console.log(this.msgBody)//证明编辑器内容存在this.msgBody中,与html相同,相比text多<p>而已
				this.$emit('editChange',html)
			},
			//sendMsg(){}//消息发送的功能外移
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .ql-container.ql-snow {
		border: none;
	}
</style>
